<template>
  <div class="base-count">
    <button @click="subCount">-</button>
    <span>{{ count }}</span>
    <button @click="addCount">+</button>
  </div>
</template>

<script>
export default {
  // 1.自己的数据随便修改  （谁的数据 谁负责）
  // data () {
  //   return {
  //     count: 100,
  //   }
  // },
  // 2.外部传过来的数据 不能随便修改
  props: {
    count: {
      type: Number,
    },
  },
  methods: {
    // 通过子传父
    // 1.$emit 触发自定义事件
    // 2.父组件中使用子组件的位置去监听这个自定义事件
    // 3.在父组件的事件处理函数中获取 子传父 传过来的数据
    subCount() {
      let newVal = this.count - 1
      this.$emit('changeCount', newVal)
    },
    addCount() {
      let newVal = this.count + 1
      this.$emit('changeCount', newVal)
    },
  },
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>